<template>
  <div class="home">
    <div class="righttop">
      <el-select v-model="lang" placeholder="代码类型">
        <el-option key="sql" label="sql" value="sql"> </el-option>
        <el-option key="javascript" label="javascript" value="javascript"> </el-option>
        <el-option key="json" label="json" value="json"> </el-option>
      </el-select>
    </div>
    <div class="header">
      <myEditor :value="code" :language="lang" theme="chrome" @change="onChange"></myEditor>
    </div>
    <div class="main">

      <el-row :gutter="20">
        <el-col :span="12">
          <label>参数样例：</label>
          <el-select v-model="Args" placeholder="代码类型">
            <el-option key="onLoadDll" label="dll参数" value="onLoadDll"> </el-option>
            <el-option key="onLoadSql" label="sql参数" value="onLoadSql"> </el-option>
            <el-option key="onLoadApi" label="api参数" value="onLoadApi"> </el-option>
            <!-- <el-option key="onLoadCorn" label="corn参数" value="onLoadCorn"> </el-option> -->
          </el-select>
          <el-button @click="onClear">清空</el-button>
        </el-col>
        <el-col :span="12">
          <label>操作类型：</label>
          <el-select v-model="SelectEvent" placeholder="请选择">
            <el-option v-for="item in FaceList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button @click="onConvert">执行</el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-button @click="OnOpenUpLoad">打开文件上传</el-button>
        <el-tooltip class="item" effect="light" content="参数调整前请先加载参数样例" placement="top">
          <el-button @click="OnOpenDiag">参数调整</el-button>
        </el-tooltip>

      </el-row>

    </div>
    <!-- 右侧抽屉选择文件上传 -->

    <el-drawer title="文件上传" :visible.sync="uploadVisible" direction="rtl">
      <el-card class="box-card">
        <el-upload :multiple="true" class="upload-demo" ref="upload" action="/api/UpLoad/SaveFile"
          :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">选择文件上传</div>
        </el-upload>
      </el-card>
    </el-drawer>
    <!-- 弹出框选修改参数 -->
    <el-dialog title="参数调整" :visible.sync="dialogVisible" width="80%">
      <el-form label-width="120px" :model="ParmModel">
        <el-form-item label="任务id">
          <el-input v-model="ParmModel.JobKey"></el-input>
        </el-form-item>
        <el-form-item label="任务类型" :gutter="20">
          <el-col :span="10">
            <el-select v-model="ParmModel.Type" placeholder="请选择任务类型">
              <el-option label="Sql类型" value="SQL"></el-option>
              <el-option label="Dll类型" value="DLL"></el-option>
              <el-option label="Api类型" value="API"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <label>任务定时</label>
          </el-col>
          <el-col :span="10">
            <el-select v-model="ParmModel.CronStr" placeholder="请选择Cron">
              <el-option label="每天0点0分" value="0 0 * * *"></el-option>
              <el-option label="小时整点" value="0 * * * *"></el-option>
              <el-option label="每小时的30分执行" value="30 * * * *"></el-option>
              <el-option label="整分钟" value="* * * * *"></el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <div v-show="ParmModel.Type === 'SQL'">
          <el-divider content-position="left">sql数据</el-divider>
          <el-form-item label="数据库类型">
            <el-select v-model="ParmModel.Data.SqlType" placeholder="请选择数据库类型">
              <el-option label="oralce" value="oracle"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="sql语句">
            <el-input v-model="ParmModel.Data.Sql"></el-input>
          </el-form-item>
          <el-form-item label="连接字符串Key">
            <el-input v-model="ParmModel.Data.Connectionkey"></el-input>
          </el-form-item>
          <el-form-item label="连接字符串">
            <el-input v-model="ParmModel.Data.ConnectionString"></el-input>
          </el-form-item>
        </div>
        <div v-show="ParmModel.Type === 'DLL'">
          <el-divider content-position="left">dll数据</el-divider>
          <el-form-item label="dll名称">
            <el-input v-model="ParmModel.Data.DllName"></el-input>
          </el-form-item>
          <el-form-item label="dll命名空间">
            <el-input v-model="ParmModel.Data.DllSpace"></el-input>
          </el-form-item>
          <el-form-item label="入口方法">
            <el-input v-model="ParmModel.Data.DllMethod"></el-input>
          </el-form-item>
          <el-form-item label="方法参数">
            <el-input v-model="ParmModel.Data.Args"></el-input>
          </el-form-item>
        </div>
        <div v-show="ParmModel.Type === 'API'">
          <el-divider content-position="left">api数据</el-divider>
          <el-form-item label="url">
            <el-input v-model="ParmModel.Data.url"></el-input>
          </el-form-item>
          <el-form-item label="resource">
            <el-input v-model="ParmModel.Data.resource"></el-input>
          </el-form-item>
          <el-form-item label="数据">
            <el-input v-model="ParmModel.Data.value"></el-input>
          </el-form-item>
          <el-form-item label="请求类型">

            <el-select v-model="ParmModel.Data.methodname" placeholder="请选择请求类型">
              <el-option label="get" value="get"></el-option>
              <el-option label="post" value="post"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方法参数">
            <el-input v-model="ParmModel.Data.headers"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="DiaghandleClose">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import axios from 'axios'
import jsondata from '../json/parm.json'
import myEditor from '../components/myEditor'
import { GetExampleDll, GetExampleSql, GetExampleApi, GetExampleCorn, RequestTimer } from '../api/homeReq.js'
export default {
  name: 'HomeView',
  created() {
    this.code = JSON.stringify(jsondata);
  },
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      uploadVisible: false,
      mainEditor: null,
      Args: "onLoadDll",
      SelectEvent: 'AddTimer',
      FaceList: [{ label: '添加任务', value: 'AddTimer' }, { label: '手动触发', value: 'TriggerTimer' }, { label: '移除任务', value: 'RemoveTimer' }],
      lang: "json",
      code: '',
      resCode: '',
      ParmModel: {
        "JobKey": "",
        "Type": "SQL",
        "CronStr": "0 0 * * *",
        "Data": {
          "url": null,
          "resource": null,
          "value": null,
          "timeout": 5000,
          "headers": null,
          "methodname": null,
          "SqlType": "oracle",
          "Sql": "insert into extapi_logs (log_id,log_date,log_message,message_id,process_result)values(Inoutseq.NEXTVAL,sysdate,1111,'hangfire中执行','测试')",
          "Connectionkey": "HIS",
          "ConnectionString": "Password=jhecis;User ID=jhecis;Data Source=(DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=192.168.103.155)(PORT=1521)))(CONNECT_DATA=(SERVER=DEDICATED)(SERVICE_NAME=DEVJHECIS)));",
          "DllName": null,
          "DllSpace": null,
          "DllMethod": null,
          "Args": null
        }
      }
    }
  },
  components: {
    myEditor: myEditor
  },
  watch: {
    Args(a) {
      console.log(a);
      this[a]();
    }
  },
  methods: {
    onConvert() {
      var dt = this.resCode;

      if (!dt) {
        this.$message({
          message: '参数不能为空！',
          type: 'warning'
        });
      }

      var apifun = this.SelectEvent;
      console.log(apifun);

      let dtata = JSON.parse(dt);
      if (!dtata.JobKey) {
        // this.$message({
        //   message: '请指定任务id：【Jobkey】',
        //   type: 'warning'
        // });
        //return;
      }

      RequestTimer(apifun, dt, (da) => {
        this.code = JSON.stringify(da);
        this.$message({
          message: '执行成功！',
          type: 'success'
        });
      });
    },
    onChange(res) {
      this.resCode = res;
    },
    onClear() {
      this.code = '';
    },
    onLoadSql() {
      GetExampleSql(res => {
        this.code = res;
      });
    },
    onLoadCorn() {
      GetExampleCorn(res => {
        this.code = res;
      });
    },
    onLoadDll() {
      GetExampleDll(res => {
        this.code = res;
      });
    },
    onLoadApi() {
      GetExampleApi(res => {
        this.code = res;
      });
    },
    OnOpenUpLoad() {
      this.onLoadFiles();
      this.uploadVisible = true;
    },
    OnOpenDiag() {
      this.ParmModel = JSON.parse(this.code);
      this.dialogVisible = true;
    },
    onLoadFiles() {
      const $this = this;
      axios({
        method: 'post',
        url: '/api/UpLoad/GetFile',
        responseType: 'json'
      }).then(function (response) {
        if (response.data.code = 200)
          $this.fileList = response.data.data;
      }).catch(function (error) {
        console.log(error);
      });
    },
    submitUpload() {
      console.log('点击上传');
      this.$refs.upload.submit();
      this.onLoadFiles();
    },
    DiaghandleClose() {
      this.dialogVisible = false;
      console.log(this.ParmModel);
      this.code = JSON.stringify(this.ParmModel);
    },
    handleRemove(file, fileList) {
      console.log(file);
      const $this = this;
      axios({
        method: 'post',
        data: file,
        url: '/api/UpLoad/DeleteFile',
        responseType: 'json'
      }).then(function (response) {
        if (response.data.code = 200)
          $this.onLoadFiles();
      }).catch(function (error) {
        console.log(error);
      });
    },
    handlePreview(file) {
      console.log(file);
    }
  }
}
</script>

<style scoped>
.header {
  width: 100%;
  height: 500px;
}

.main {
  background-color: grey;
  color: white;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  padding: 20px;
  margin: 0px 2px;
  box-sizing: border-box;
}



.righttop {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100px;
  height: 40px;
  overflow: hidden;
  opacity: 0.5;
  z-index: 99;
}
</style>